<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue的入门案例</title>
        <!-- 第1步：引入vue.js的脚本 -->
        <script type="text/javascript" src="../plugins/vue/vue.js"></script>

        <script type="text/javascript" src="../plugins/axios/axios.js"></script>
        <!-- 这里一定要注意js文件的导入顺序（原因：界面在加载时，所有界面中的代码，是从上到下依次加载）-->
        <script type="text/javascript" src="../js/main.js"></script>
    </head>
    <body>
        <div id="app">
            <button @click="sendData"> 点我发后台请求</button>

            <ul>
                <li v-for="item in dataList">
                    姓名：{{item.name}},年龄:{{item.age}},密码：{{item.pwd}}

                </li>
            </ul>
        </div>

    </body>
    <script>
        /* 3. 在js脚本中，添加一个绑定vue到id=app的根标签*/
        new Vue({
            el: "#app",
            data: {
                dataList: [] //定义一个接收请求返回的集合数据
            },
            methods: {
                sendData() {
                    this.$http.get("/user/list").then(res=>{
                        this.dataList = res.data;

                    })

                }
            }

        })


    </script>
</html>
